// @unocss-include
import { $t } from '@renderer/locales'
import { getRgb } from '@renderer/packages/color'
import { localStg } from '@renderer/utils/storage'

export function setupLoading() {
  const themeColor = localStg.get('themeColor') || '#646cff'

  const { r, g, b } = getRgb(themeColor)

  const primaryColor = `--primary-color: ${r} ${g} ${b}`

  const loadingClasses = [
    'left-0 top-0',
    'left-0 bottom-0 animate-delay-500',
    'right-0 top-0 animate-delay-1000',
    'right-0 bottom-0 animate-delay-1500'
  ]

  const dot = loadingClasses
    .map((item) => {
      return `<div class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse ${item}"></div>`
    })
    .join('\n')

  const loading = `
<div class="fixed-center flex-col" style="${primaryColor}">
  <div class="w-56px h-56px my-36px">
    <div class="relative h-full animate-spin">
      ${dot}
    </div>
  </div>
  <h2 class="text-28px font-500 text-#646464">${$t('system.title')}</h2>
</div>`

  const app = document.getElementById('app')

  if (app) {
    app.innerHTML = loading
  }
}
